<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Whole Screen</title>
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no,">
<script src="./js/jquery-3.2.1.js"></script>
<style>
* {
	margin: 0px;
	padding: 0px;
}

html, body {
	width: 100%;
	overflow: auto;
	background-color: lime;
	margin: 0px;
	padding: 0px;
}

.container {
	width: 100%;
}

@media screen and (max-width: 768px){
	.container {
		width: 750px;
		margin: auto;
		padding: 0;
	}
}

#header{
	background-color: maroon;
}

#footer {
	width: 100%;
	background-color: navy;
}

header{
	width: 100%;
	background-color: #000000;
	color: #ffffff;
	height: 45px;
	line-height: 45px;
	margin: 0px;
	padding: 0px;
}

.row {
	font-size: 12px;
}
</style>
<script type="text/javascript">
var $footer = $("#footer");
$(window).bind("load", function() {	
	positionFooter();
	function positionFooter() {
		var screenHeight = window.screen.height;
		var windowHeight = $(window).height();
		if(window.window_height == undefined){
			window.window_height = windowHeight;
		}
		var flag = windowHeight < ((screenHeight/3)*2);
		if (flag) {
			setLayoutWithKeyBoard();
		} else {
			setLayoutWithoutKeyBoard();
		}
	}
	
	function setLoyout(){
		var headerHeight = window.window_height - 45;
		$("#header").height(headerHeight);
		$("#footer").height(45);
		
		$("#bodyInfo").html(window.screen.height + " " + $(window).height() + " "  + $("body").height());
		$("#headerInfo").html($("#header").height());		
		$("#footerInfo").html($("#footer").height() + " " + $("#footer").offset().top);
	}
	
	function setLayoutWithKeyBoard(){
		setLoyout();
		$footer.css({
			position: "absolute",
			top: ((window.window_height) + "px")
		});
	}
	
	function setLayoutWithoutKeyBoard(){
		setLoyout();
		$footer.css({
			position: "static"
		});
	}
	
	$(window).scroll(positionFooter).resize(positionFooter);
});
</script>
</head>
<body id="bodyContainer" class="container">
	<div id="header">
		<header> I am header </header>
		<div>
			<div class="row">
				<input type="text">
			</div>
			<div class="row">
				<input type="text">
			</div>
			<div class="row">
				<div id="bodyInfo"></div>
				<div id="headerInfo"></div>
				<div id="footerInfo"></div>
			</div>
		</div>
	</div>
	<div id="footer">
		I am footer
	</div>
</body>
</html>